import { Injectable } from '@angular/core';
import * as _ from 'lodash';

@Injectable()
export class AlarmEchartsService {

    // 集团及项目告警统计环图
    showReportPie(ReportTotalNum, ReportNormalNum, ReportSeriousNum) {
        const labelOutSide = {
            normal: {
                color: '#1FB5FF',
            }
        };
        const labelInSide = {
            normal: {
                color: '#fccf49',
            }
        };
        const options = {
            title: {
                text: '告警总数',
                left: 'center',
                top: '30%',
                subtext: ReportTotalNum,
                itemGap: 2,
                subtextStyle: {
                    color: '#222',
                    fontSize: 32,
                },
                textStyle: {
                    color: '#555',
                    fontSize: 10,
                    fontWeight: 400
                }
            },
            tooltip: {
                textStyle: {
                    fontSize: 12
                },
                backgroundColor: 'rgba(38, 42, 53,.5)',
                trigger: 'item',
                formatter: function (param) {
                    let str = '';
                    str = '<span style="display: inline-block; position: relative; border-radius: 10px;margin: 0 6px 1px 0; width: 6px; height: 6px; background-color: ' + param.color + '"></span>' + '<span style="font - size: 9px">' + param.name + '<p style="font - size: 12px; margin: -6px 0 0 10px; ">' + param.value + '<em style="font-size: 9px;font-style:normal;">个</em>' + '</p>' + '</span>';
                    return str;
                }
            },
            grid: {
                left: '0%',
                right: '0%',
                top: '0%',
                bottom: '0%',
                containLabel: true
            },
            series: [{
                type: 'pie',
                radius: ['82%', '92%'],
                center: ['50%', '50%'],
                clockwise: false,
                hoverOffset: 5,
                data: [{
                    name: '一般告警',
                    value: ReportNormalNum,
                    itemStyle: labelOutSide,
                }, {
                    name: '严重告警',
                    value: ReportSeriousNum,
                    itemStyle: labelInSide,
                }],
                itemStyle: {
                    normal: {
                        label: {
                            show: false  // 隐藏标示文字
                        },
                        labelLine: {
                            show: false  // 隐藏标示线
                        }
                    }
                }
            }]
        };
        return options;
    }

    // 集团及项目告警类型柱状图
    showReportBar(ReportTypeName, ReportTypeTotalNum, ReportTypeDeal) {
        const option = {
            tooltip: {
                trigger: 'axis',
                textStyle: {
                    fontSize: 12
                },
                backgroundColor: 'rgba(38, 42, 53, .5)',
                axisPointer: {
                    type: 'none'
                },
                formatter: function (params) {
                    let str = '';
                    str = '<span style="font-size:9px;color:#fff;padding-bottom:6px">' + params[0].name + '</span>';
                    for (let i = 0; i < params.length; i++) {
                        str += '<div style="margin-top:-4px;display:block"><span style="display:inline-block;position:relative;border-radius:10px;margin:0 6px 0.5px 0;width:6px;height:6px;background-color:' + params[i].color + '"></span>' + '<span style="font-size:9px;color:#fff">' + params[i].seriesName + '：' + '<i style="font-size:12px;color:#fff;font-style:normal;">' + params[i].value + '</i>' + '个' + '</span></div>';
                    }
                    return str;
                }
            },
            xAxis: {
                data: ReportTypeName,
                axisTick: {
                    show: false
                },
                axisLabel: {
                    formatter: function (value) {
                        if (value.length > 4) {
                            return value.substring(0, 4) + '....';
                        } else {
                            return value;
                        }
                    },
                    color: '#777',
                    fontSize: 10,
                    interval: 0
                },
                axisLine: {
                    lineStyle: {
                        color: '#f0f4f5'
                    }
                }
            },
            yAxis: {
                type: 'value',
                position: 'right',
                axisLabel: {
                    inside: true,
                    verticalAlign: 'bottom',
                    margin: 0,
                    fontSize: 9,
                    color: '#777'
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                splitLine: {
                    lineStyle: {
                        type: 'dashed',
                        color: '#e8e8e8',
                        opacity: 0.5,
                    }
                }
            },
            grid: {
                left: '3%',
                right: '3%',
                top: '20%',
                bottom: '10%',
                containLabel: true
            },
            // 告警类别数据
            series: [{
                legendHoverLink: false,
                type: 'bar',
                name: '总数',
                data: ReportTypeTotalNum,
                barMaxWidth: 10,
                silent: false,
                itemStyle: {
                    normal: {
                        color: '#FFCF54',
                        barBorderRadius: [20, 20, 0, 0]
                    }
                }
            }, {
                legendHoverLink: false,
                type: 'bar',
                name: '已响应',
                data: ReportTypeDeal,
                barMaxWidth: 10,
                silent: false,
                itemStyle: {
                    normal: {
                        color: '#74dbff',
                        barBorderRadius: [20, 20, 0, 0]
                    }
                }
            }]
        };
        return option;
    }

    // 集团及项目告警处理图表
    showRepotDoublePie(ReportProHCount, ReportProACount, ReportProRecCount, ReportProResCount, ReportProNResCount, ReportProNHCount, ReportProNRecCount) {
        const ItemStyle = {
            normal: {
                label: {
                    show: false // 隐藏标示文字
                },
                labelLine: {
                    show: false // 隐藏标示线
                }
            }
        };
        const option = {
            title: [{
                text: '已响应',
                left: 'center',
                top: '22%',
                subtext: ReportProHCount,
                itemGap: 1,
                subtextStyle: {
                    color: '#222',
                    fontSize: 21,
                },
                textStyle: {
                    color: '#555',
                    fontSize: 10,
                    fontWeight: 400
                }
            }, {
                text: '总数',
                left: 'center',
                bottom: '16%',
                subtext: ReportProACount,
                itemGap: 1,
                subtextStyle: {
                    color: '#222',
                    fontSize: 21,
                },
                textStyle: {
                    color: '#555',
                    fontSize: 10,
                    fontWeight: 400
                }
            }],
            tooltip: {
                backgroundColor: 'rgba(38, 42, 53, .5)',
                trigger: 'item',
                formatter: function (param) {
                    let str = '';
                    str = '<span style="display:inline-block;position:relative;border-radius:10px;margin:0 6px 0.5px 0;width:6px;height:6px;background-color:' + param.color + '"></span>' + '<span style="font-size:9px;">' + param.name + '<p style="font-size:12px;margin:-6px 0 0 12px;">' + param.value + '<em style="font-size:9px">个</em>' + '</p>' + '</span>';
                    return str;
                },
                textStyle: {
                    fontSize: 12
                },
                position: {
                    right: '-20%',
                    bottom: 0,
                }
            },
            grid: {
                left: '0%',
                right: '0%',
                top: '0%',
                bottom: '0%',
                containLabel: true
            },
            series: [{
                type: 'pie',
                radius: ['82%', '92%'],
                center: ['50%', '50%'],
                hoverOffset: 5,
                data: [{
                    name: '及时响应的告警',
                    value: ReportProResCount
                }, {
                    name: '未及时响应的告警',
                    value: ReportProNResCount
                }, {
                    name: '未响应的告警',
                    value: ReportProNHCount
                }],
                color: ['#5c9ded', '#fd873e', '#f15755'],
                itemStyle: ItemStyle
            }, {
                type: 'pie',
                radius: ['60%', '70%'],
                center: ['50%', '50%'],
                hoverOffset: 5,
                clockwise: false,
                data: [{
                    name: '未及时恢复的告警',
                    value: ReportProNRecCount
                }, {
                    name: '及时恢复的告警',
                    value: ReportProRecCount
                }],
                color: ['#d8e0e6', '#62c97e'],
                itemStyle: ItemStyle
            }]
        };
        return option;
    }

    // 集团及项目总能耗折线图
    showEnergyLine(showMinLabel, ToolName, XEnergyData, EnergySplitLine, TotalEnergyLegend, ToDayEnergyName, ToDayEnergyNum, YesToDayEnergyName, YesToDayEnergyNum) {
        const Toption = {
            tooltip: {
                background: 'rgba(38, 42, 53, .5)',
                trigger: 'axis',
                triggerOn: 'mousemove|click',
                formatter: function(params) {
                    let str = '';
                    str = '<div style="display:block;color:#fff;font-size:9px;">' + params[0].name + '</div>';
                    for (let i = 0; i < params.length; i++) {
                        if (params[i].value !== '无') {
                            str += '<div style="display:block;margin:-4px 0;"><span style="display:inline-block;position:relative;border-radius:10px;margin:0 6px 1px 0;width:6px;height:6px;background-color:' + params[i].color + '"></span>' + '<span style="font-size:9px">' + ToolName[i] + '总耗能：' + '<i style="font-size:12px;font-style:normal;">' + params[i].value + '</i>' + 'kWh' + '</span></div>';
                        } else {
                            str += '<div style="display:block;margin:-4px 0"><span style="display:inline-block;position:relative;border-radius:10px;margin:0 6px 1px 0;width:6px;height:6px;background-color:' + params[i].color + '"></span>' + '<span style="font-size:9px">' + ToolName[i] + '总耗能：' + '<i style="font-size:12px;font-style:normal;">' + params[i].value + '</i>' + '' + '</span></div>';
                        }

                    }
                    return str;
                },
                textStyle: {
                    fontSize: 12
                }
            },
            legend: {
                itemWidth: 10,
                itemHeight: 1,
                data: TotalEnergyLegend,
                right: 0,
                top: 0,
                icon: 'line',
                textStyle: {
                    color: '#777',
                    fontSize: 9
                }
            },
            xAxis: [{
                nameLocation: 'center',
                data: XEnergyData,
                boundaryGap: false,
                axisLine: {
                    lineStyle: {
                        color: '#d6d6d4'
                    }
                },
                axisTick: {
                    show: false,
                    interval: 0,
                    alignWithLabel: true
                },
                axisLabel: {
                    interval: 0,
                    color: '#222',
                    fontSize: 7,
                    showMinLabel: showMinLabel
                }
            }],
            yAxis: [{
                type: 'value',
                axisLabel: {
                    color: '#222',
                    fontSize: 7,
                    showMinLabel: true,
                    margin: 2,
                    formatter: function (value) {
                        if (value >= 1000) {
                            return value / 1000 + 'K';
                        } else {
                            return value;
                        }
                    }
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: EnergySplitLine,
                    lineStyle: {
                        color: '#f8f8f5'
                    }
                }
            }],
            grid: {
                left: '0%',
                right: '0%',
                top: '15%',
                bottom: '0%',
                width: '95%',
                height: '80%',
                containLabel: true
            },

            // 总能耗折线数据
            series: [{
                name: ToDayEnergyName,
                type: 'line',
                showSymbol: false,
                hoverAnimation: false,
                data: ToDayEnergyNum,
                smooth: true,
                symbol: 'roundRect',
                lineStyle: {
                    normal: {
                        width: 1,
                    }
                },
                itemStyle: {
                    normal: {
                        width: 1,
                        color: '#80b9f8',
                    }
                },
            }, {
                name: YesToDayEnergyName,
                type: 'line',
                showSymbol: false,
                hoverAnimation: false,
                smooth: true,
                data: YesToDayEnergyNum,
                symbol: 'roundRect',
                lineStyle: {
                    normal: {
                        width: 1
                    }
                },
                itemStyle: {
                    normal: {
                        width: 1,
                        color: '#9ce6cb',
                    }
                },
            }]
        };

        return Toption;
    }

    // 集团及项目分项能耗饼图
    showEnergyPie(ItemLengend, ItemColor, ItemToolUnit, ItemData) {
        const colorList = ItemColor;
        let itemGap = 0;
        let itemGapLeft = '';
        for (let i = 0; i < colorList.length; i++) {
            if (colorList[i] === 'rgb()') {
                colorList.splice(i, 1);
                i = i - 1;
            }
        }
        if (colorList.length >= 15) {
            itemGap = 5;
            itemGapLeft = '55%';
        } else {
            if (colorList.length >= 9) {
                itemGapLeft = '55%';
            } else {
                itemGapLeft = '60%';
            }
            itemGap = 10;
        }
        const Ioption = {
            tooltip: {
                alwaysShowContent: false,
                hideDelay: 50,
                backgroundColor: 'rgba(38, 42, 53, .5)',
                trigger: 'item',
                formatter: function (param) {
                    let str = '';
                    str = '<span style="display:inline-block;position:relative;border-radius:10px;margin:0 6px 1px 0;width:6px;height:6px;background-color:' + param.color + '"></span>' + '<span style="font-size:9px">' + param.name + '<p style="font-size:12px;margin:-6px 0 0 10px;">' + param.value + '<i style="font-size:9px;font-style:normal;">' + ItemToolUnit + '&nbsp;&nbsp;' + '<em style="font-size:12px">' + param.percent.toFixed(1) + '</em>' + '%' + '</i>' + '</p>' + '</span>';
                    return str;
                },
                textStyle: {
                    fontSize: 12
                }
            },
            legend: {
                itemGap: itemGap,
                itemWidth: 6,
                itemHeight: 6,
                orient: 'vertical',
                data: ItemLengend,
                top: '5%',
                left: itemGapLeft,
                icon: 'circle',
                formatter: function (name) {
                    return name.length > 4 ? name.substr(0, 4) + '...' : name;
                },
                textStyle: {
                    fontSize: 12,
                    color: '#222',
                    fontWeight: 400
                }
            },
            grid: {
                left: '5%',
                right: '5%',
                top: '20%',
                bottom: '0%',
            },

            // 分项能耗数据
            series: [{
                type: 'pie',
                data: ItemData,
                color: colorList,
                hoverOffset: 5,
                radius: ['0%', '70%'],
                center: ['30%', '50%'],
                itemStyle: {
                    normal: {
                        label: {
                            show: false // 隐藏标示文字
                        },
                        labelLine: {
                            show: false // 隐藏标示线
                        }
                    }
                },

            }]
        };

        return Ioption;
    }
}
